<template>
    <div class="Video">
        <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9 vjs-fluid" >
            <p class="vjs-no-js">
                To view this video please enable JavaScript, and consider upgrading to a
                web browser that
                <a href="https://videojs.com/html5-video-support/" target="_blank">
                supports HTML5 video
                </a>
            </p>
        </video>
    </div>
</template>

<script>
export default {
    data() {
        return {
            videoUrl:'https://media.w3.org/2010/05/sintel/trailer.mp4',
            defaultImgUrl:'https://cdnimg.soulmia.com/SM/image/Banner/20201029_1075/banner1.jpg'
        }
    },
    mounted(){
        this.initVideo()       
    },
    methods: {
        initVideo() {
            this.$nextTick(()=>{
                let myPlayer = this.$video('#myVideo', {
                    //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
                    controls: true,
                    //自动播放属性,muted:静音播放
                    autoplay: false,
                    //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
                    preload: "auto",
                    fluid:true,
                    playbackRates: [0.5, 1, 1.5, 2],
                    sources:[
                        {
                            src:this.videoUrl,
                            type:'video/mp4',
                            poster:this.defaultImgUrl
                        }
                    ],
                    controlBar:{
                        'playToggle':true,
                        'playbackRateMenuButton':true,
                        'volumeMenuButton':true
                    }
                },()=>{
                    console.log('视频可以播放了',this)
                })
            })
        },
        
    },
}
</script>

<style lang="less" scoped>
.Video{
    margin-top:0px;
    height:100%;
}
</style>